<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Spoxcy New User Register Page</title>
<style type="text/css">
<!--
.STYLE1 {
	color: #0000FF;
	font-weight: bold;
}
.STYLE2 {
	color: #FF9900;
	font-weight: bold;
	font-size: 24px;
}
-->
</style>

<script language="javascript" type="text/javascript">
    /*
     * Returns a new XMLHttpRequest object, or false if this browser
     * doesn't support it
     */
    function newXMLHttpRequest() {

      var xmlreq = false;

      if (window.XMLHttpRequest) {
        // Create XMLHttpRequest object in non-Microsoft browsers
        xmlreq = new XMLHttpRequest();
        
      } else if (window.ActiveXObject) {
        // Create XMLHttpRequest via MS ActiveX
        try {
          // Try to create XMLHttpRequest in later versions
          // of Internet Explorer
          xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
          // Failed to create required ActiveXObject
          try {
            // Try version supported by older versions
            // of Internet Explorer
            xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e2) {
            // Unable to create an XMLHttpRequest with ActiveX
          }
        }
      }

      return xmlreq;
    }

    function callServer() {
        // Get the city and state from the web form
        var userName = document.getElementById("userName").value;

        // Only go on if there are values for both fields
        if ((userName == null) || (userName == "")) return;

        // Build the URL to connect to
        var url = "./AjaxValidationServlet?username=" + escape(userName);

 

        var xmlHttp = newXMLHttpRequest();

        // Open a connection to the server
        xmlHttp.open("GET", url, true);

        // Setup a function for the server to run when it's done
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                 var response = xmlHttp.responseText;
                 if(response == "yes"){
                    document.getElementById("result").innerHTML = "<font color='red' style='font-weight:bold; font-size:12px;'>Sorry, User Name already existed!</font>";
                 }else{
                    document.getElementById("result").innerHTML = "<font color='green' style='font-weight:bold; font-size:12px;'>User Name is Ok.</font>";
                 }
            }
        }

        xmlHttp.send(null);
  }

</script>

</head>

<body>
	
	 <br/>
	 <br/>
	 <br/>

	<div align="center"><span class="STYLE2">Spoxcy User Register Page </span>
	  
	    <br/>
	    <br/>
	    <br/>
	  
    </div>
	<form id="registerForm" name="registerForm" method="post" action="./RegistrationServlet">
			
			  <div align="center">
			    <table width="435" border="0">
			      
			      <tr>
                    <td width="163" height="30"><div align="left"><span class="STYLE1">First Name</span></div></td>
				    <td width="262"><input type="text" name="firstName" /></td>
                    <td width="200"></td>
				  </tr>
			      
			      <tr>
			        <td height="30"><div align="left"><span class="STYLE1">Surname </span></div></td>
				    <td><input type="text" name="surname" /></td>
                    <td></td>
                  </tr>
			      
			      <tr>
			        <td height="30"><div align="left"><span class="STYLE1">User Name </span></div></td>
				    <td><input type="text" name="userName" id="userName" onblur="callServer()"/> <div id="result"></div></td>
                    <td></td>
				  </tr>

                  <tr>
			        <td height="30"><div align="left"><span class="STYLE1">Contact Number</span></div></td>
				    <td><input type="text" name="contactNum" /></td>
                    <td></td>
                 </tr>
			      
			      <tr>
			        <td height="30"><div align="left"><span class="STYLE1">Password </span></div></td>
				    <td><input type="password" name="password" /></td>
                    <td></td>
			     </tr>
			      
			      <tr>
			        <td height="60"><div align="left"><span class="STYLE1">Address </span></div></td>
				    <td><textarea name="address" cols="30" rows="3"></textarea></td>
                    <td></td>
				  </tr>
			      </table>
			    <br/>
			    <br/>
			    
			    <input name="Submit" type="submit" value="Submit"/>
				&nbsp;&nbsp;&nbsp;
				<input name="Reset" type="reset" value="Reset"/>
      </div>
	</form>
</body>
</html>
